<template>
  <div class="app-container">
    <el-button
      class="filter-item marginRB10"
      type="primary"
      icon="el-icon-plus"
      @click="handleCreate()"
      >添加</el-button
    >
    <!-- <el-button class="marginRB10" type="danger" @click="allDel()" plain
      >批量删除</el-button
    > -->
    <el-table
      ref="dataList"
      :data="menuList"
      style="margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="game_id" label="功能ID"> </el-table-column>
      <el-table-column prop="game_name" label="功能说明"> </el-table-column>
      <el-table-column prop="user_grade" label="用户经验等级">
      </el-table-column>
      <el-table-column prop="start_time" label="开启日期"> </el-table-column>
      <el-table-column prop="end_time" label="结束日期"> </el-table-column>
      <el-table-column prop="time_slot" label="开启时间段"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? "开启" : "关闭" }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="image" label="图片">
        <template slot-scope="scope">
          <el-popover placement="left" width="220" trigger="hover">
            <img
              :src="scope.row.image"
              alt=""
              style="max-width: 200px; max-height: 200px"
            />
            <img
              slot="reference"
              :src="scope.row.image"
              alt=""
              style="height: 25px"
            />
          </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column min-width="180" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            plain
            >编辑</el-button
          >
          <!-- <cus-del-btn @ok="handleDelete(scope.row)"></cus-del-btn> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-dialogDrag
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      @close="handleDialogClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="功能ID" prop="game_id">
          <el-input
            placeholder="请输入功能ID"
            v-model="form.game_id"
          ></el-input>
        </el-form-item>
        <el-form-item label="功能名称" prop="game_name">
          <el-input
            placeholder="请输入功能名称"
            v-model="form.game_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户开启等级" prop="user_grade">
          <el-input
            placeholder="请输入用户开启等级"
            v-model="form.user_grade"
          ></el-input>
        </el-form-item>
        <el-form-item label="开启日期" prop="start_time">
          <el-date-picker
            v-model="form.start_time"
            type="date"
            placeholder="选择开启日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="end_time">
          <el-date-picker
            v-model="form.end_time"
            type="date"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="游戏状态" prop="status">
          <el-radio v-model="form.status" :label="1">开启</el-radio>
          <el-radio v-model="form.status" :label="2">关闭</el-radio>
        </el-form-item>
        <el-form-item label="时间段">
          <div
            v-for="(item, index) in time_arr"
            :key="'时间段' + index"
            class="mb-3"
          >
            <el-input-number
              v-model="item.first"
              :min="0"
              :max="24"
            ></el-input-number>
            至
            <el-input-number
              v-model="item.last"
              :min="0"
              :max="24"
            ></el-input-number>
            <el-button v-if="index" @click.prevent="removeDomain(item)"
              >删除</el-button
            >
          </div>
          <el-button @click="addDomain">新增时间段</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm()">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveData,
  deleteData,
  updateData,
  listData
} from "@/api/gameOptions/gameOptions";
export default {
  data() {
    return {
      listLoading: true,
      canEdit: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10
      },
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: "",
      titleMap: {
        update: "编辑",
        create: "增加"
      },
      options: ["开启", "结束"],

      time_arr: [{ first: 0, last: 24 }],

      form: {
        id: undefined,
        game_id: undefined,
        game_name: undefined,
        user_grade: undefined,
        start_time: undefined,
        end_time: undefined,
        time_slot: undefined,
        status: undefined
      },
      rules: {
        game_id: [{ required: true, message: "请输入功能ID", trigger: "blur" }],
        game_name: [
          { required: true, message: "请输入功能名称", trigger: "blur" }
        ],
        user_grade: [
          { required: true, message: "请输入用户开启等级", trigger: "blur" }
        ],
        start_time: [
          { required: true, message: "请选择开启日期", trigger: "blur" }
        ],
        end_time: [
          { required: true, message: "请选择结束日期", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择开启状态", trigger: "change" }
        ],
        time_slot: [
          { required: true, message: "请选择开启时间段", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      listData().then(response => {
        this.menuList = response.data;
        this.listLoading = false;
      });
    },
    handleCreate(row) {
      this.resetForm();
      this.dialogStatus = "create";
      this.canEdit = false;
      this.dialogFormVisible = true;
    },
    handleUpdate(row) {
      for (let key in this.form) {
        if (key === "time_slot") {
          this.time_arr = JSON.parse(row[key]).map(item => {
            return { first: item[0], last: item[1] };
          });
        } else if (key.endsWith("_time")) {
          this.form[key] = row[key].split(" ")[0];
        } else {
          this.form[key] = row[key];
        }
      }


      this.dialogStatus = "update";
      this.canEdit = true;
      this.dialogFormVisible = true;
      this.form = Object.assign({}, this.form);
    },
    // 删除
    handleDelete(row) {
      let data = { id: row.id };
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList();
          this.submitOk("删除成功");
        } else {
          this.submitFail("删除失败");
        }
      });
    },
    // 全部删除
    allDel() {

      let delNum = [];
      this.$refs.dataList.selection.forEach(k => {
        delNum.push(k.id);
      });
      if (delNum.length === 0) {
        return;
      }
      let data = { id: delNum.toString() };
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList();
          this.submitOk("删除成功");
        } else {
          this.submitFail("删除失败");
        }
      });
    },

    resetForm() {
      this.form = {
        id: undefined,
        game_id: undefined,
        game_name: undefined,
        user_grade: undefined,
        start_time: undefined,
        end_time: undefined,
        time_slot: undefined,
        status: undefined
      };
      this.time_arr = [{ first: 0, last: 24 }];
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].clearValidate(); // 清除整个表单的校验
      }
    },

    removeDomain(item) {
      let index = this.time_arr.indexOf(item);
      if (index !== -1) {
        this.time_arr.splice(index, 1);
      }
    },
    addDomain() {
      this.time_arr.push({
        first: 0,
        last: 24
      });
    },

    submitForm() {
      this.$refs.form.validate(valid => {
        let arr = this.time_arr.map(item => {
          return item.first + "-" + item.last;
        });
        this.form.time_slot = arr.join(",");
        if (valid) {
          if (this.dialogStatus === "create") {
            saveData(this.form).then(res => {
              if (res.code === 200) {
                this.getList();
                this.dialogFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000
                });
              }
            });
          } else {
            updateData(this.form).then(res => {
              if (res.code === 200) {
                this.getList();
                this.dialogFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000
                });
              }
            });
          }
        } else {

          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.el-date-editor >>> .el-range-separator {
  width: 10% !important;
}
.el-range-editor--medium {
  width: 100%;
}
.during-date {
  width: 86%;
}
.self-remove {
  color: red;
  font-size: 25px;
  cursor: pointer;
}
.begin-time,
.end-time {
  width: 113px;
}
</style>
